<!doctype html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>jQuery EasyUI</title>
	<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
	<script type="text/javascript" src="../../jquery.min.js"></script>
	<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
	<script type="text/javascript" src="datagrid-detailview-ben.js"></script>
	<script>
	var data1=[
						{companyid:2,orderdate:false,shippeddate:'12/25/2012',freight:9734},
						{companyid:2,orderdate:true,shippeddate:'12/25/2012',freight:3231}
					];
	
		var conf = {
			options:{
				fitColumns:true,
				columns:[[
				{field:'test',title:'展开',width:200,expander:true},
					{field:'company',title:'Company Name',width:200 },
					{field:'contact',title:'Contact Name',width:200},
					{field:'country',title:'Country',width:200}
				]],
				data:[
					{ test:true,companyid:1,company:'Speed Info',contact:'Minna John',country:'Sweden'},
				{test:false,companyid:2,company:'Speed Info2',contact:'Minna John2',country:'Sweden2'}
				
				],
				onExpandRow: function(rowIndex, rowData){ },
				onLoadSuccess: function(data){
				 if(data.rows.length == 0){
				 alert("no data");
                       var body = $(this).data().datagrid.dc.body2;
                       body.find('table tbody').append('<tr><td width="' + body.width() + '" style="height:25px;text-align:center;color:#919EA6;">正常</td></tr>');
                   }
		else
	{
	//alert(data.rows.length);
	//var body = $(this).data().datagrid.dc.body1;
	for(var i=0;i<data.rows.length;i++){
	//alert(data.rows[i].contact);
	if(data.rows[i].test){
	//alert(data.rows[i].company);
	//var expander = $.find('div.datagrid-row-expander[row-index=' + i + ']');
		//expander.removeClass('datagrid-row-expand').removeClass('datagrid-row-collapse');
	}
	}
	
}

				
				}
			},
			subgrid:{
				options:{
					fitColumns:true,
					foreignField:'companyid',
					columns:[[
						{field:'orderdate',title:'Order Date',width:200,expander:true},
						{field:'shippeddate',title:'Shipped Date',width:200},
						{field:'freight',title:'Freight',width:200}
					]],
					data:data1,
					
				},
				subgrid:{
					options:{
						fitColumns:true,
						foreignField:'orderid',
						columns:[[
							{field:'price',title:'Unit Price',width:200,align:'right',expander:true},
							{field:'quantity',title:'Quantity',width:200,align:'right'},
							{field:'discount',title:'Discount',width:200,align:'right',formatter:function(value){
								return value*100+'%'
							}}
						]],
						data:[
							{price:false,quantity:2312,discount:0.2},
							{price:true,quantity:2312,discount:0.2},
							{price:false,quantity:2312,discount:0.2}
						]
					},
					subgrid:{
						options:{
							fitColumns:true,
							foreignField:'pid',
							singleSelect:true,
							columns:[[
								{field:'pnumber',title:'Product Number',width:200,expander:true},
								{field:'pname',title:'Product Name',width:200},
								{field:'supplier',title:'Supplier',width:200}
							]],
							data:[
								{pnumber:'00100823',pname:'Canon PowerShot A1300',supplier:'Canon'},
								{pnumber:'12023423',pname:'Cisco RV110W-A-NA-K9',supplier:'Cisco'},
								{pnumber:'82312393',pname:'Nikon COOLPIX L26 16.1 MP',supplier:'Nikon'}
							]
						}
					}
				}
			}
		};

		$(function(){
			$('#tt').datagrid({
				title:'DataGrid - Nested SubGrid',
				width:700,
				height:300
			}).datagrid('subgrid', conf);
		});
	</script>
</head>
<body>
	<h1>DataGrid - Nested SubGrid</h1>
	
	<table id="tt"></table>
</body>
</html>